<template>
    <div class="app-container" v-loading="loading">
        <div class="container">
            <el-form ref="searchForm" :model="searchForm" inline>
                <!-- <el-form-item label="资产编号:" >
            <el-col :span="6">
              <el-input v-model="searchForm.assetCode" clearable style="width:350px;"></el-input>
            </el-col>
          </el-form-item> -->
                <el-form-item label="设备编号/资产编号:">
                    <el-col :span="6">
                        <el-input v-model="searchForm.text" clearable style="width:200px;"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="起止时间:">
                    <el-date-picker v-model='searchForm.dateTime' type='datetimerange' :picker-options='pickerOptions'
                        range-separator='至' start-placeholder='开始日期' end-placeholder='结束日期' align='right'
                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change='changeTime' clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="维度:">
                    <el-select v-model="searchForm.dimension" filterable clearable placeholder="请选择">
                        <el-option v-for="item in timeDimensionList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button
                        style="margin-left:5px;background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none"
                        type="primary" icon="el-icon-search" size="mini" @click="queryByForm">检索</el-button>
                </el-form-item>
                <!-- <el-form-item>
          <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="importAssetcode"
          >导入资产编号 (Excel)</el-button
          >
        </el-form-item> -->

                <el-form-item>
                    <!-- <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue"  filename="排面陈列"
                        buttonName="数据导出"></ExportExcel> -->
                </el-form-item>


            </el-form>
            <!-- <div style="display: flex;margin-top: 0px;margin-bottom: 20px;">
                <el-button type="primary"
                    style="background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none">新增</el-button>
                <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'" @click="adjustOpen = true">导出</el-button>
                <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'">删除</el-button>
            </div> -->
            <el-table ref="deviceTable" :data="displayData" style="width: 100%"
                @selection-change="handleSelectionChange()" row-key="id">
                <el-table-column type="selection" width="55" :reserve-selection="true">
                </el-table-column>
                <el-table-column label="资产编号" prop="assetCode" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top" width="180" trigger="hover">
                            <p>设备id ：{{ scope.row.deviceId }}</p>
                            <p>设备名称：{{ scope.row.deviceName }}</p>
                            <p>柜子类型 ：{{ scope.row.containerModel || '暂未绑定' }}</p>
                            <span slot="reference">{{ scope.row.assetCode || '暂未绑定' }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="抓图" prop="imageUrl" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover trigger="hover" placement="bottom" width="400">
                <img
                  slot="reference"
                  :src="scope.row.imageUrl"
                  style="width: 20px;height: 20px;"
                  v-if="scope.row.imageUrl"
                />
                <img
                  :src="scope.row.imageUrl"
                  style="width: 300px"
                  v-if="scope.row.imageUrl"
                />
              </el-popover>
            </div>
          </template>
        </el-table-column> -->
                <el-table-column label="纯净度" prop="purity" align="center"></el-table-column>
                <el-table-column label="纯净度（空）" prop="purityEmpty" align="center"></el-table-column>
                <el-table-column label="黄金位纯度" prop="goldPurity" align="center"></el-table-column>
                <el-table-column label="黄金位纯度（空）" prop="goldPurityEmpty" align="center"></el-table-column>
                <el-table-column label="黄金位饱和度" prop="goldSaturation" align="center"></el-table-column>
                <el-table-column label="饱和度" prop="saturation" align="center"></el-table-column>

                <el-table-column label="采集时间" :show-overflow-tooltip="true" prop="date" align="center">

                    <template slot-scope="scope">
                        <span>{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-button type="info" icon="el-icon-wenduji1" circle></el-button>
                <el-table-column label="所属商品" prop="username" align="center">

                    <template slot-scope="scope">
                        {{ scope.row.username || '-' }}
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="page">
                <div style="margin-right: 20px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">共7条</div>
                <el-button type="text" style="color:#333;margin-right: 10px;">
                    <</el-button>
                        <div class="pageborder">1</div>
                        <el-button type="text" style="color:#333;margin-right: 10px;">></el-button>
                        <div style="margin-right: 10px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">前往</div>
                        <el-input type="number" style="width: 60px;margin-right: 10px;" :min="0" v-model="pageIndex" />
                        <div style="color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">页</div>
            </div> -->


            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 2000, 3000]" @pagination="pagination" />
        </div>
    </div>
</template>

<script>
// import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
// //   import { userListSon } from '@/api/user'
//   import { getFirstCoverDisplayByText } from '@/api/dataCenter/index.js'
// //   import AllAddress from '@/plugins/data.js'
// import { importAssetCode2 } from '@/api/device/masterDevice.js'
export default {
    // components: {
    //     ExportExcel
    // },
    data() {
        return {
            displayData: [],//表格数据
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            excelFile: '',
            importDialogOpen: false,
            importLoading: false,
            exportList: [],
            tHeader: ['时间', '资产编号', '设备编号', '纯净度（含空位）', '纯净度（不含空位）', '饱和度', '黄金位纯进度(含空位)', '黄金位纯进度(不含空位)', '黄金位饱和度'],
            tValue: ['date', 'assetCode', 'deviceId', 'purityEmpty', 'purity', 'saturation', 'goldPurityEmpty', 'goldPurity', 'goldSaturation'],
            // oHeader: ['产品编号','cpuid','资产编号'],
            // oValue:['123','123','123'],
            // province:'',
            // city:'',
            // region:'',
            // provinceValue:'',
            // cityValue:'',
            // regionValue:'',
            // provinceList:[],
            // cityList:[],
            // regionList:[],
            timeDimensionList: [
                {
                    value: 1,
                    label: '日'
                },
                {
                    value: 2,
                    label: '周'
                },
                {
                    value: 3,
                    label: '月'
                },
                {
                    value: 4,
                    label: '季度'
                }
            ],
            loading: false,
            searchForm: {
                text: '',//设备编号 或 资产编号
                dateTime: '',
                startDate: '',//开始日期,格式: 2023-02-20
                endDate: '', //结束日期,格式: 2023-02-20
                dimension: 1 // 时间维度（日/周/月/季度）日：1，周：2，月：3，季度:4
            },
            // 分页相关数据
            total: 0,
            pageNum: 1,
            pageSize: 20,
        }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
        changeTime() {
            console.log(this.searchForm.dateTime)
        },
        handFileChange(e) {
            console.log(e)
            let fileData = e.target.files[0] //这是我们上传的文件
            this.excelFile = fileData
            console.log('@@ ee => ', this.excelFile)
        },
        submit() {
            if (this.excelFile) {
                console.log("传入的excel文件为", this.excelFile)
                const formData = new FormData()
                formData.append('file', this.excelFile)
                const param = {
                    file: formData
                }
                importAssetCode2(param).then((res) => {
                    if (res.code === 0) {
                        this.$message.success("资产编码文件导入成功！")
                        this.importDialogOpen = false
                        this.getListData()
                        this.excelFile = ''
                    }
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                    if (err.code === 1) {
                        this.$message.error('执行失败，原因：' + err.message)
                    } else if (err.code === 2) {
                        this.$message.error('token错误，需要重新登陆。原因：' + err.message)
                    } else if (err.code === -1) {
                        this.$message.error('服务端错误，原因：' + err.message)
                    }
                })
            } else {
                // this.$message.error('验证码错误')
                this.$message.error('请先上传文件')
            }

        },
        cancelImport() {
            this.importDialogOpen = false
            this.excelFile = ''
        },
        /** 导入资产编号 */
        importAssetcode() {
            this.importDialogOpen = true
        },
        //表格全选事件
        handleSelectionChange() {
            console.log("选中的数据", this.$refs.deviceTable.selection)
            this.exportList = this.$refs.deviceTable.selection
        },
        getColorMap(value) {
            // 在线 绿色   不在线红色  未激活黄色
            // emumStatus.ONLINE
            // emumStatus.OFFLINE
            // emumStatus.UNACTIVE
            let color = 'c-grey'
            switch (value) {
                case 'ONLINE':
                    color = 'c-green'
                    break
                case 'OFFLINE':
                    color = 'c-red'
                    break
                case 'UNACTIVE':
                    color = 'c-yellow'
                    break
                default:
                    break
            }
            return color
        },
        pagination() {
            if (this.total > this.pageNum * this.pageSize) {
                this.pageNum += 1
                this.getListData()
            }
            // this.getListData()
        }, // 分页查询
        queryByForm() {
            this.pageNum = 1;
            console.log("表单内容为", this.searchForm)
            this.getListData()
        },
        getListData() {
            if (this.searchForm.dateTime[0]) {
                this.searchForm.startDate = this.searchForm.dateTime[0].slice(0, 10)
            }
            if (this.searchForm.dateTime[1]) {
                this.searchForm.endDate = this.searchForm.dateTime[1].slice(0, 10)
            }
            const params = {
                text: this.searchForm.text,
                startDate: this.searchForm.startDate,
                endDate: this.searchForm.endDate,
                dimension: this.searchForm.dimension,
                userId: this.$store.state.user.id
            }
            console.log(params)
            this.loading = true
            getFirstCoverDisplayByText(params)
                .then((res) => {
                    console.log('## display data', res)
                    this.displayData = res.data.data
                    this.total = res.data.totalCount
                })
                .catch((err) => {
                    this.$message.error(err.message)
                    console.log('## list error ==>', err)
                })
                .finally(() => {
                    this.loading = false
                })
        },
    }
}
</script>

<style lang="scss">
.app-container {
    background-color: #F3F3F3;
    width: 100%;
    height: calc(100vh - 85px);
    display: flex;
    flex-direction: column;
    padding: 1%;
}

.container {
    background-color: white;
    height: 100%;
    padding: 15px;
    border-radius: 8px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.radio {
    .el-radio__label {
        display: none;
    }
}

// ::v-deep .el-table .el-table__body td .cell:empty::after{
//     content: "-";
//   }
.status-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.c-grey {
    background: grey;
}

.c-green {
    background: green;
}

.c-red {
    background: red;
}

.c-yellow {
    background: yellow;
}

.device-long {
    white-space: nowrap;
}

.item-link {
    cursor: pointer;
    color: #409eff;
}

.page {
    display: flex;
    height: 80px;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.02);
    bottom: 10px;
    position: absolute;
}

.pageborder {
    margin-right: 10px;
    border: 1px solid #DCDFE6;
    width: 40px;
    height: 36px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

::v-deep .el-input__inner {
    border: solid 1px #333;
}

::v-deep .el-input__inner::-webkit-outer-spin-button,
::v-deep .el-input__inner::-webkit-inner-spin-button {

    -webkit-appearance: none;
}

::v-deep .el-input__inner[type='number'] {
    -moz-appearance: textfield;
}

::v-deep .el-form-item--medium .el-form-item__label {
    font-family: 'HarmonyOS_Sans_SC_Regular';
}
</style>